<template>
  <div class="container">
    <ul class="goods-box">
      <li class="goods" v-for="(goods,index) in goodsList" :key="index">
        <img @click="getDetail(goods.id)" :src="goods.image" :alt="goods.name">
        <!-- <img class="keyframes" @click="getDetail(goods.id)" :src="goods.image" :alt="goods.name"> -->
        <span class="name">{{ goods.name }}</span>
        <span>￥</span>
        <span class="price">{{ goods.price.toFixed(2) }}</span>
        <div @click="addToCart(goods.id)" class="add">+</div>
      </li>
    </ul>
    <ul class="toggle">
      <li @click="pageQuery(index)" :class="{active:(isActive === index)}" v-for="(_,index) in Math.ceil(total / 8)" :key="index"></li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import { mapState } from 'vuex';

  export default {
    name:'MachineGoods',
    data(){
      return {
        isActive:0,
        categoryId:0
      }
    },
    computed:{
      ...mapState(['goodsList','total'])
    },  
    methods:{
      pageQuery(index){
        // console.log(index)
        this.isActive = index
        // 获取当前所处的分类id
        this.$bus.$on('getCategoryId',(categoryId)=>{ this.categoryId = categoryId})
        // 进行分页查询
        this.$store.dispatch('getGoodsList',{categoryId:this.categoryId === 0 ? '' : this.categoryId,pageNo:index+1})
      },
      // 添加商品到购物车
      async addToCart(goodsId){
        const res = await axios.post('/shoppingCart/add',{
          goodId:goodsId,
          number:1
        })
        // 通知Footer组件商品数量增加
        this.$bus.$emit('updateCount',1)
      },
      async getDetail(goodsId){
        // console.log("查询了商品详细信息",goodsId)
        // 展示商品详情弹框
        this.$bus.$emit('showDetails',true)
        // 获取当前商品信息
        const res = await axios.get(`/user/goods/${goodsId}`)
        // console.log(res)
        // 将商品信息传递给GoodsDetail组件
        this.$bus.$emit('getGoodsDetail',res.data.data)
      }
    },
    // 页面挂载时获取数据
    mounted(){
      this.pageQuery(0)
      // 修改 isActive 值
      this.$bus.$on('defaultActive',value => this.isActive = value)
      // 等待定时器的触发返回首页
      // this.$bus.$on('backMainNav',(value) => this.isActive = value)
    }
  }
</script>

<style scoped>
  .goods-box{
    display: flex;
    /* justify-content: space-around; */
    flex-wrap: wrap;
    height: 660px;
  }
  .goods-box .goods{
    margin-top: 20px;
    margin-left: 33px;
    padding: 5px 10px;
    width: 220px;
    height: 310px;
    background-color: #fff;
    border-radius: 14px;
    position: relative;
  }
  .goods-box .goods img{
    width: 100%;
    height: 220px;
  }
  /* .goods-box li:hover{
    background-color: #f2efef;
  } */
  .goods-box .goods .name{
    display: block;
    font-size: 16px
  }
  .goods-box .goods span:nth-child(3){
    font-size: 10px;
    color: #cf4c7c;
  }
  .goods-box .goods .price{
    color: #cf4c7c;
    font-size: 20px;
  }
  .goods-box .goods .add{
    position: absolute;
    background-color: #cf4c7c;
    color: #fff;
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 24px;
    font-size: 22px;
    border-radius: 13px;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
  }
  .container .toggle{
    display: flex;
    justify-content: center;
  }
  .container .toggle li{
    margin: 20px 5px 5px 5px;
    width: 20px;
    height: 20px;
    background-color: #809495;
    border-radius: 10px;
    cursor: pointer;
  }
  .container .toggle .active{
    background-color: #cf6722;
  }
  .keyframes{
    position: absolute;
    right: 0px;
    width: 100%;
    height: 220px;
    z-index: 1;
  }
</style>